<!DOCTYPE html>
<html lang="zh" xmlns:th="http://www.thymeleaf.org" xmlns:shiro="http://www.pollix.at/thymeleaf/shiro">
<head>
    <th:block th:include="include :: header('图表组合')" />
</head>
<style>
    /* 方块样式 */
    .ibox-content{
        background-color: #1890FF;
        border:0px solid;
        border-radius:25px;
        color: white;
    }
    .ibox{
        background-color: #f3f3f4;
        border:0px solid;
    }
</style>
<body class="gray-bg">
<div class="wrapper wrapper-content animated fadeInRight">
    <div class="row">
        <div style="margin-left: 30px">
            <a class="btn btn-primary btn-rounded v-btm-l" onclick="getData(1)"><i class="fa "></i>昨日</a>&nbsp;&nbsp;&nbsp;
            <a class="btn btn-primary btn-rounded v-btm-l" onclick="getData(2)"><i class="fa "></i>当月</a>&nbsp;&nbsp;&nbsp;
            <a class="btn btn-primary btn-rounded v-btm-l" onclick="getData(3)"><i class="fa "></i>当年</a>
        </div>
    </div>

    <br>

    <div class="row">
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h3>总金额</h3>
                    <h1 class="no-margins"  style="text-align:center" id="total_fee"></h1>
                    <!--                    <div class="stat-percent font-bold text-navy">98% <i class="fa fa-bolt"></i></div>-->
                    <!--    <div class="stat-percent font-bold text-navy" style="color: white">元 </div>
                        <small>单位</small>v-->
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h3>实收金额</h3>
                    <h1 class="no-margins " style="text-align:center"  id="receipt_fee"></h1>
                    <!--  <div class="stat-percent font-bold text-navy" style="color: white">元 </div>
                      <small>单位</small> -->
                </div>
            </div>
        </div>
        <div class="col-sm-4">
            <div class="ibox">
                <div class="ibox-content">
                    <h3>优惠券金额</h3>
                    <h1 class="no-margins"  style="text-align:center" id="coupon_fee"></h1>
                    <!-- <div class="stat-percent font-bold text-navy" style="color: white">元 </div>
                     <small>单位</small> -->
                </div>
            </div>
        </div>

    </div>

    <div style="margin-top: 100px">
        <div class="col-sm-12" style="margin-bottom: 5px">

            <div style="height: 600px" id="echarts-line-chart"></div>

        </div>
    </div>
    </br>

</div>
<th:block th:include="include :: footer" />
<th:block th:include="include :: peity-js" />
<th:block th:include="include :: sparkline-js" />
<script src="https://cdn.jsdelivr.net/npm/echarts@5.0.2/dist/echarts.min.js"></script>

<script >
    var ctx = "[[@{/}]]";
</script>
<!--<script type="text/javascript">

    $(document).ready(function () {
/*        $("#sparkline1").sparkline([34, 43, 43, 35, 44, 32, 44, 52], {
            type: 'line',
            width: '100%',
            height: '60',
            lineColor: '#1ab394',
            fillColor: "#ffffff"
        });

        $("#sparkline2").sparkline([24, 43, 43, 55, 44, 62, 44, 72], {
            type: 'line',
            width: '100%',
            height: '60',
            lineColor: '#1ab394',
            fillColor: "#ffffff"
        });

        $("#sparkline3").sparkline([74, 43, 23, 55, 54, 32, 24, 12], {
            type: 'line',
            width: '100%',
            height: '60',
            lineColor: '#ed5565',
            fillColor: "#ffffff"
        });

        $("#sparkline4").sparkline([24, 43, 33, 55, 64, 72, 44, 22], {
            type: 'line',
            width: '100%',
            height: '60',
            lineColor: '#ed5565',
            fillColor: "#ffffff"
        });

        $("#sparkline5").sparkline([1, 4], {
            type: 'pie',
            height: '140',
            sliceColors: ['#1ab394', '#F5F5F5']
        });

        $("#sparkline6").sparkline([5, 3], {
            type: 'pie',
            height: '140',
            sliceColors: ['#1ab394', '#F5F5F5']
        });

        $("#sparkline7").sparkline([2, 2], {
            type: 'pie',
            height: '140',
            sliceColors: ['#ed5565', '#F5F5F5']
        });

        $("#sparkline8").sparkline([2, 3], {
            type: 'pie',
            height: '140',
            sliceColors: ['#ed5565', '#F5F5F5']
        });*/
    });


</script>-->
<script th:inline="javascript">
    //  var ctx = /*[[@{/}]]*/'/'  ;

    //    var ctx = [[@{/}]];


    $(document).ready(getData(1));
    // $(function () {
    var ctx = /*[[@{/}]]*/'/'  ;

    function getData(param) {

        console.log("param: " + param);
        $.ajax({
            type: 'POST',
            //    url: ctx + '/queryAmount',
            //    url:   'http://localhost:8005/baodao/pay/queryAmount',
            url:   ctx + 'baodao/pay/queryAmount',
            data: {time: param},
            success: function (result) {
                console.log(result)
                //填充数据
                $("#total_fee").text(result.total_fee  + ' 元');
                $("#receipt_fee").text(result.receipt_fee  + ' 元');
                $("#coupon_fee").text(result.coupon_fee  + ' 元');
            },
            dataType: 'json'
        });

        if(param == 1) {
            console.log("按小时查询")
            $.ajax({
                type: 'POST',
                //    url: ctx + '/queryAmount',
                //    url:   'http://localhost:8005/baodao/pay/queryAmount',
                url: ctx + 'baodao/pay/queryTransactionDetails',
                data: {time: param},
                success: function (result) {
                    console.log(result)
                    let dataX = []; //
                    let dataY1 = []; //
                    for (var i in result) {
                        dataX.push(result[i].hour);
                        dataY1.push(result[i].total_fee);

                    }
                    console.log("dataX :" + dataX)
                    console.log("dataY :" + dataY1)
                    //填充数据
                    /*  $("#total_fee").text(result.total_fee  + ' 元');
                $("#receipt_fee").text(result.receipt_fee  + ' 元');
                $("#coupon_fee").text(result.coupon_fee  + ' 元');*/

                    lineChart = echarts.init(document.getElementById("echarts-line-chart"));
                    var lineoption = {
                        title: {
                            text: '销售额',
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['销售数']
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                //  data: ['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19']
                                data: dataX
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '销售额',
                                type: 'bar',
                                data: dataY1,
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            }
                        ]
                    };
                    lineChart.setOption(lineoption);
                },
                dataType: 'json'
            });
        }

        if(param == 2) {
            console.log("按天查询")
            $.ajax({
                type: 'POST',
                //    url: ctx + '/queryAmount',
                //    url:   'http://localhost:8005/baodao/pay/queryAmount',
                url: ctx + 'baodao/pay/queryTransactionDetails',
                data: {time: param},
                success: function (result) {
                    console.log(result)
                    let dataX = []; //
                    let dataY1 = []; //
                    for (var i in result) {
                        dataX.push(result[i].day);
                        dataY1.push(result[i].total_fee);

                    }
                    console.log("dataX :" + dataX)
                    console.log("dataY :" + dataY1)
                    //填充数据
                    /*  $("#total_fee").text(result.total_fee  + ' 元');
                $("#receipt_fee").text(result.receipt_fee  + ' 元');
                $("#coupon_fee").text(result.coupon_fee  + ' 元');*/
                    var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
                    var lineoption = {
                        title: {
                            text: '销售额',
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['销售数']
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                //  data: ['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19']
                                data: dataX
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '销售额',
                                type: 'bar',
                                data: dataY1,
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            }
                        ]
                    };
                    lineChart.setOption(lineoption);
                },
                dataType: 'json'
            });
        }

        if(param == 3) {
            console.log("按月查询")
            $.ajax({
                type: 'POST',
                //    url: ctx + '/queryAmount',
                //    url:   'http://localhost:8005/baodao/pay/queryAmount',
                url: ctx + 'baodao/pay/queryTransactionDetails',
                data: {time: param},
                success: function (result) {
                    console.log(result)
                    let dataX = []; //
                    let dataY1 = []; //
                    for (var i in result) {
                        dataX.push(result[i].month);
                        dataY1.push(result[i].total_fee);

                    }
                    console.log("dataX :" + dataX)
                    console.log("dataY :" + dataY1)
                    //填充数据
                    /*  $("#total_fee").text(result.total_fee  + ' 元');
                $("#receipt_fee").text(result.receipt_fee  + ' 元');
                $("#coupon_fee").text(result.coupon_fee  + ' 元');*/
                    var lineChart = echarts.init(document.getElementById("echarts-line-chart"));
                    var lineoption = {
                        title: {
                            text: '销售额',
                            subtext: ''
                        },
                        tooltip: {
                            trigger: 'axis'
                        },
                        legend: {
                            data: ['销售数']
                        },
                        calculable: true,
                        xAxis: [
                            {
                                type: 'category',
                                //  data: ['8', '9', '10', '11', '12', '13', '14', '15', '16', '17', '18', '19']
                                data: dataX
                            }
                        ],
                        yAxis: [
                            {
                                type: 'value'
                            }
                        ],
                        series: [
                            {
                                name: '销售额',
                                type: 'bar',
                                data: dataY1,
                                markPoint: {
                                    data: [
                                        {type: 'max', name: '最大值'},
                                        {type: 'min', name: '最小值'}
                                    ]
                                },
                                markLine: {
                                    data: [
                                        {type: 'average', name: '平均值'}
                                    ]
                                }
                            }
                        ]
                    };
                    lineChart.setOption(lineoption);
                },
                dataType: 'json'
            });
        }


    }





</script>
</body>
</html>